<template>
  <div class="solution-detail">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="180px"
    >
      <el-form-item
        :label="item.label"
        :prop="String(item.value)"
        v-for="item in linkTypeOptions"
      >
        <el-rate v-model="formData[String(item.value)]" :max="10"></el-rate>
      </el-form-item>

      <el-form-item size="mini">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";
import { getProjectDetail, linkScore } from "@/api/project/index";
export default {
  components: { BasicBusiness, Step },
  props: [],
  data() {
    return {
      formData: {
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
      },
      rules: {},
      linkTypeOptions: [
        {
          label: "商机环节",
          value: 1,
        },
        {
          label: "方案评审环节",
          value: 2,
        },
        {
          label: "前向合同环节",
          value: 3,
        },
        {
          label: "后向采购环节",
          value: 4,
        },
        {
          label: "交付实施环节",
          value: 5,
        },
      ],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});

      getProjectDetail(this.boId).then((res) => {
        ;
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单

        const scores = Object.keys(this.formData).map((key) => {
          return {
            linkType: Number(key),
            score: this.formData[key],
          };
        });

        linkScore({
          scores,
          boId: this.boId,
          projectId: this.projectId,
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace('/rate/index');
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style>
.el-rate {
  display: inline-block;
  vertical-align: text-top;
}
</style>
